<template>
    <div>
         <div class="footer">
            <ul class="foot-list">
                <router-link v-for="(item,index) in tabList" :key="index" :to="item.link" tag="li">
                    <a href="javaScript:;" @click="change(index)">
                        <img v-show="tabId!=index" :src="item.img1" alt="">
                        <img v-show="tabId==index" :src="item.img2" alt="">
                    </a><span :class="{'active':tabId==index}">{{item.name}}</span>
                    </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        props:['index'],
        data() {
            return {
                 tabId:0,
                 tabList: [
                    {
                        img1:require("../assets/images/icon_main_home_normal.png"),
                        img2:require("../assets/images/icon_main_home_sel.png"),
                        name:'首页',
                        link:'/home'
                    },
                    {
                        img1:require("../assets/images/icon_main_course_normal.png"),
                        img2:require("../assets/images/icon_main_course_sel.png"),
                        name:'课堂',
                        link:'/class'
                    },
                    {
                        img1:require("../assets/images/icon_main_talk_normal.png"),
                        img2:require("../assets/images/icon_main_talk_sel.png"),
                        name:'食话',
                        link:'/cannibalism'
                    },
                    {
                        img1:require("../assets/images/icon_main_collection.png"),
                        img2:require("../assets/images/icon_main_collection_sel.png"),
                        name:'收藏',
                        link:'/favorite'
                    },
                    {
                        img1:require("../assets/images/icon_main_mine_normal.png"),
                        img2:require("../assets/images/icon_main_mine_sel.png"),
                        name:'我的',
                        link:'/my'
                    },
                ],
            };
        },
        methods: {
            change(index){
                this.tabId = index
                window.localStorage.setItem("tabId",this.tabId)
            }
        },
        created() {
            if (window.localStorage.getItem("tabId")) {
                
                this.tabId = window.localStorage.getItem("tabId")
            }else{
                 this.tabId=this.index
            }
        },
    }
</script>

<style lang="less" scoped>
   .footer {
        margin: 0 auto;
        height: 60px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background-color: #f5f5f5;
    
        .foot-list {
            height: 100%;
            display: flex;
    
            &>li {
                width: 20%;
                height: 100%;
                margin-top: 10px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
    
                &>a {
                    width: 20px;
                    height: 20px;
                    position: relative;
    
                    &>img {
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
    
                    .start {
                        display: block;
                    }
                    .end {
                        display: none;
                    }
    
                }
                &>span{
                    display: block;
                    font-size: 12px;
                }
                .active{
                    color: #ffb548;
                }
            }
        }
    }
</style>